@charset "utf-8";


/* =全局CSS
------------------------------------------------------------ */

html,body{ height:100%; width:100%; position: relative; overflow:hidden; background:url(../images/p-bg.jpg) no-repeat top center;}

.con_wrap{ position:relative; overflow:hidden;display:block; width:100%; height:100%;  }

/*开始页*/


@keyframes a_opacity{
	0%{ opacity:0; }
	100%{ opacity:1; }
}

@keyframes a_dialog_qr_show{
	0%{ transform:scale(0.1); opacity:0;}
	100%{ transform:scale(1); opacity:1;}
}





.main{ width:1080px; height:766px;position:fixed; left:50%; margin-left:-540px;top:50%; margin-top:-386px;}



.userinfo{ overflow:hidden; padding:20px; float:right;}
.userinfo .username{ background:url(../images/user_name.png) no-repeat; }
.userinfo .getgold{ background:url(../images/user_gold.png) no-repeat 5px;}
.userinfo .shop{ background: url(../images/user_shop.png) no-repeat;}
.userinfo p{ height:50px; padding-top:10px;font-size:22px; line-height:28px; text-align:center;  font-weight:bold;color:#1970c0; margin-bottom:20px;}
.userinfo p a{color:#1970c0;}
.userinfo p a:hover{ color:red;}
.userinfo .text{ border:1px solid #1970c0; width:110px; border-radius:20px;  display:block; margin-left:50px; background:#fff; box-shadow:3px 3px 3px #242424;}
.userinfo .shop a{}
.userinfo .exit{ background:url(../images/user_close.png) no-repeat;}





.left_box{ width:100px; height:766px; float:left; }
.left_box li{  width:75px; height:75px; margin:10px 0; text-align:center; transition:all ease-in-out .3s;}
.stms_left li{background:url(../images/stms/bag2.png) no-repeat; background-size:contain;}

.btn_start{ position:absolute; top:-50px; color:#FFFFFF;}

.stms_right{width:766px; height:766px; float:left; overflow:hidden; background:url(../images/stms/bg.jpg) no-repeat center; position:relative;}

.fot_gold{ overflow:hidden;position: absolute; bottom: 0; background:rgba(30,30,30,.8); width:100%; margin:0 auto;height:60px; padding:10px 0 5px; text-align:center;}
.fot_gold li{ margin:0 10px; width:60px; height:60px; display:inline-block; text-align:center; }
.fot_gold .success{background:url(../images/gold1.png) no-repeat;}
.fot_gold .gold_offset{ display:block; width:1px; height:1px; background:rgba(0,0,0,0.00); margin:0 auto; background:red; width:10px; height:10px; position:relative; left:0; top:;}

.game_tips{   position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:230px;overflow:hidden; width:400px;  text-align:center; font-size:22px; color:#fff; font-weight:bold; border:2px solid #fff; padding:5px; display:none; opacity:1; background:#ff8105;}
.num_total{ color:#fff; font-size:30px; padding:10px 0; color:#0024ff; }


.game_rule{ width:400px; height:297px; background:url(../images/rule.png) no-repeat; position:absolute; z-index:9999; left:50%; top:50%; margin-left:-200px; margin-top:-148px;}
.game_rule .close{ display:block; width:56px; height:56px; background:url(../images/rule_close.png) no-repeat; position:relative; left:340px; cursor:pointer;}
.game_rule .close:hover{background:url(../images/rule_close2.png) no-repeat;}
.game_rule .ok{ display:block; width:200px; height:50px; position:relative; top:220px; left:100px; cursor:pointer;}
.game_rule .content{ color:#0024ff; font-size:20px; width:300px; margin:50px auto 0; line-height:30px; text-align:center; font-weight:bold; font-family:"宋体";}

.pop_prompt{ width:400px; height:379px; position:absolute; left:50%; top:50%; z-index:9999; margin-left:-200px; margin-top:-189px; background:url(../images/alert.png) no-repeat; display:none;}
.pop_prompt .pro_close{ display:block; width:36px; height:36px; background:url(../images/alert_close2.png) no-repeat; position:relative; left:370px; top:26px; cursor:pointer; }
.pop_prompt .pro_close:hover{background:url(../images/alert_close.png) no-repeat;}
.pop_prompt .pro_ok{ display:block; width:200px; height:50px; position:relative; top:310px; left:100px; cursor:pointer;}
.pop_prompt .content{ padding-top:140px; color:red; font-size:20px; text-align:center; font-weight:bold;}
.pop_prompt .content .font{ font-size:34px; display:block; padding-bottom:20px; }

.pop_prompt .finish_con{  line-height:24px;}
.pop_prompt .finish_con .font{ padding-bottom:30px}
.pop_prompt .finish_con span{ padding:0 20px;}



.big_gold{ position:absolute; left:50%; top:200px; z-index:999; margin-left:-100px; width:200px; height:200px; display:none;}


.game_level{ overflow:hidden;  font-size:22px; font-weight:bold; position:absolute; top:350px; right:10px;   border: 1px solid #1970c0; border-radius: 20px;background: #fff;box-shadow: 3px 3px 3px #242424; color: #1970c0; padding:0 22px;}
.game_level_curr{ color:#ff8105;}







.con_wrap_1{ background:#eceef3/*fcd214*/;}
.con_wrap_1 .cover_tips{ display:block; height:12px; width:113px; background:url(../images/cover_tips.png) no-repeat 0 0; 
background-size:contain; position:absolute; left:50%; margin-left:-57px; top:18px; text-indent:-9999px; overflow:hidden; z-index:3; opacity:0;}
.logo_ipengoo{ display:block; height:188px; width:188px; background:#000; border-radius:94px; position:relative;}
.logo_ipengoo .eye{ display:block; height:17px; width:7px; background:#fff; position:absolute; left:50%; top:50%; margin-left:-22px; margin-top:-24px; border-radius:4px;  transition:transform 0.1s ease-in-out;}
.logo_ipengoo .eye_2{ margin-left:15px;}
.logo_ipengoo .mouse{ display:block; height:24px; width:64px; background:#fcd214; position:absolute; left:50%; top:50%; margin-left:-32px; margin-top:2px; border-radius:64px/24px;  transition:transform 0.1s ease-in-out;}


.logo_ipengoo.size_85{ display:block; height:85px; width:85px; background:#000; border-radius:43px;}
.logo_ipengoo.size_85 .eye{ display:block; height:8px; width:3px; background:#fff; position:absolute; left:50%; top:50%; margin-left:-10px; margin-top:-12px; border-radius:3px;}
.logo_ipengoo.size_85 .eye_2{ margin-left:7px;}
.logo_ipengoo.size_85 .mouse{ display:block; height:11px; width:29px; background:#fcd214; position:absolute; left:50%; top:50%; margin-left:-15px; margin-top:2px; border-radius:29px/11px;}


.con_wrap_1 .title{ display:block; height:32px; width:188px; position:absolute; left:50%; top:50%; margin-left:-94px; margin-top:-3px; z-index:3;}
.con_wrap_1 .title .txt{ display:none;}
.con_wrap_1 .title .word_hook{ display:block; height:32px; width:188px; position:absolute; left:0; top:0; transform-origin:50% 100%;}
.con_wrap_1 .title .word{ display:block; height:32px; width:8px; background:url(../images/title_sprite.png) no-repeat 0 0; background-size:151px 32px; position:absolute; left:0px; top:0px; opacity:0; transform-origin:50% 100%;}
.con_wrap_1 .title .word_2{ width:25px; background-position:-10px 0; left:11px;}
.con_wrap_1 .title .word_3{ width:23px; background-position:-37px 0; left:39px;}
.con_wrap_1 .title .word_4{ width:27px; background-position:-62px 0; left:64px;}
.con_wrap_1 .title .word_5{ width:28px; background-position:-91px 0; left:94px;}
.con_wrap_1 .title .word_6,.con_wrap_1 .title .word_7{ width:30px; background-position:-121px 0; left:125px;}
.con_wrap_1 .title .word_7{ left:158px;}

.con_wrap_1 .title_tips{ display:block; height:20px; width:186px; position:absolute; left:50%; top:50%; margin-left:-93px; margin-top:44px; z-index:3;}
.con_wrap_1 .title_tips .volume_1{ display:block; height:20px; width:39px; background:url(../images/title_tips_1.png) no-repeat 0 0; background-size:contain; position:absolute; left:0; top:0; text-indent:-9999px; overflow:hidden; opacity:0;}
.con_wrap_1 .title_tips .txt{ display:block; height:17px; width:142px; background:url(../images/title_tips_2.png) no-repeat 0 0; background-size:contain; position:absolute; right:0; top:2px; text-indent:-9999px; overflow:hidden; opacity:0;}

.con_wrap_1 .btn_start{ display:block; height:60px; width:191px;/* background:#fff; border:2px solid #000;*/ background:url(../images/btn_start.png) no-repeat 0 0; background-size:contain; position:absolute; left:50%; top:50%; margin-left:-96px; margin-top:103px; border-radius:60px; box-shadow:0px 5px 0px rgba(0,0,0,0.15); z-index:3; opacity:0; tap-highlight-color:rgba(0,0,0,0);}
.con_wrap_1 .btn_start .txt{ display:block; height:29px; width:89px; background:url(../images/btn_txt_start.png) no-repeat 0 0; background-size:contain; position:absolute; left:50%; top:50%; margin-left:-45px; margin-top:-15px; text-indent:-9999px; overflow:hidden;}
.con_wrap_1 .btn_tips{ display:block; height:10px; width:192px; background:url(../images/btn_tips.png) no-repeat 0 0; background-size:contain; position:absolute; left:50%; top:50%; margin-left:-96px; margin-top:252px; text-indent:-9999px; overflow:hidden; z-index:3; opacity:0;}

.music_area{ display:block; height:30px; width:93px; background:none; border:2px solid #000; border-radius:30px; position:absolute; left:50%; margin-left:-47px; top:50%; margin-top:185px; z-index:3; opacity:0; }

.music_area .music_off{ display:block; height:30px; width:45px; position:absolute; left:0px; top:0px; z-index:2; tap-highlight-color:rgba(0,0,0,0);}
.music_area .music_off i{ display:block; height:14px; width:16px; position:absolute; left:18px; top:8px; background:url(../images/music_off.png) no-repeat 0 0; background-size:contain; text-indent:-9999px; overflow: hidden; z-index:2;}

.music_area .music_on{ display:block; height:30px; width:45px; position:absolute; right:0px; top:0px; z-index:2; tap-highlight-color:rgba(0,0,0,0);}
.music_area .music_on i{ display:block; height:14px; width:16px; position:absolute; left:11px; top:8px; background:url(../images/music_on.png) no-repeat 0 0; background-size:contain; text-indent:-9999px; overflow:hidden;}

.music_area .slide_block{ display:block; height:22px; width:44px; position:absolute; left:2px; top:2px; background:#fff; border-radius:22px; border:2px solid #000; z-index:1; transition:transform 0.2s ease-in-out;}
.slide_off .slide_block{ transform:translate(0px,0px);}
.slide_on .slide_block{ transform:translate(41px,0px);}





.start_page_show.con_wrap_1 .title .word_1{ animation:a_title_word_1 0.3s 0.7s linear both;}
.start_page_show.con_wrap_1 .title .word_2{ animation:a_title_word_1 0.3s 0.8s linear both;}
.start_page_show.con_wrap_1 .title .word_3{ animation:a_title_word_1 0.3s 0.9s linear both;}
.start_page_show.con_wrap_1 .title .word_4{ animation:a_title_word_1 0.3s 1.0s linear both;}
.start_page_show.con_wrap_1 .title .word_5{ animation:a_title_word_1 0.3s 1.1s linear both;}
.start_page_show.con_wrap_1 .title .word_6{ animation:a_title_word_1 0.3s 1.2s linear both;}
.start_page_show.con_wrap_1 .title .word_7{ animation:a_title_word_7 0.3s 1.5s linear both;}

.start_page_show.con_wrap_1 .title .word_hook{ animation:a_title_word_hook 0.3s 1.5s linear both;}

.start_page_show.con_wrap_1 .title_tips .volume_1{ animation:a_title_volume_1 0.2s 1.8s ease-in both;}
.start_page_show.con_wrap_1 .title_tips .txt{ animation:a_opacity 0.3s 2.1s linear both;}

.start_page_show.con_wrap_1 .btn_start{ animation:a_btn_start 0.3s 2.5s linear both;}
.start_page_show.con_wrap_1 .music_area{ animation:a_btn_start 0.3s 2.8s linear both;}
.start_page_show.con_wrap_1 .btn_tips{ animation:a_opacity 0.3s 3.1s linear both;}


@keyframes a_btn_start{
	0%{ opacity:0; pointer-events:none; }
	100%{ opacity:1; pointer-events:auto; }
}


@keyframes a_title_word_1{
	0%{ opacity:0; transform:translate(15px,-150px) scale(1,1); }
	5%{ opacity:1; transform:translate(15px,-150px) scale(0.8,1.2); }
	60%{ opacity:1; transform:translate(15px,0px) scale(1.4,0.7); }
	80%{ opacity:1; transform:translate(15px,0px) scale(0.9,1.1); }
	100%{ opacity:1; transform:translate(15px,0px) scale(1,1); }
}

@keyframes a_title_word_7{
	0%{ opacity:0; transform:translate(100px,0px) skew(-20deg,0deg); }
	5%{ opacity:1; transform:translate(100px,0px) skew(-20deg,0deg); }
	20%{ opacity:1; transform:translate(12px,0px) skew(-15deg,0deg); }
	25%{ opacity:1; transform:translate(12px,0px) skew(0deg,0deg); }
	50%{ opacity:1; transform:translate(0px,0px) skew(10deg,0deg); }
	70%{ opacity:1; transform:translate(0px,0px) skew(-10deg,0deg); }
	85%{ opacity:1; transform:translate(0px,0px) skew(5deg,0deg); }
	100%{ opacity:1; transform:translate(0px,0px) skew(0deg,0deg); }
}

@keyframes a_title_word_hook{
	0%{ transform:translate(0px,0px) skew(0deg,0deg); }
	20%{ transform:translate(0px,0px) skew(0deg,0deg); }
	25%{ transform:translate(-15px,0px) skew(-10deg,0deg); }
	50%{ transform:translate(-15px,0px) skew(10deg,0deg); }
	70%{ transform:translate(-15px,0px) skew(-10deg,0deg); }
	85%{ transform:translate(-15px,0px) skew(5deg,0deg); }
	100%{ transform:translate(-15px,0px) skew(0deg,0deg); }
}

@keyframes a_title_volume_1{
	0%{ opacity:0; transform:scale(0.1); }
	50%{ opacity:1; transform:scale(1.1); }
	75%{ opacity:1; transform:scale(0.95); }
	100%{ opacity:1; transform:scale(1); }
}


/*开始页*/

.con_wrap_2{ z-index:2; }
.star_area{ display:block; height:29px; width:101px; position:absolute; left:50%; margin-left:65px; top:24px; opacity:0;}
.star_area .star{ display:block; height:29px; width:29px; position:absolute; left:0px; top:0px;}
.star_area .star .solid{ display:block; height:29px; width:29px; position:absolute; left:0px; top:0px; background:url(../images/score_star.png) no-repeat 0 0; background-size:contain; z-index:2;}
.star_area .star .hollow{ display:block; height:29px; width:29px; position:absolute; left:0px; top:0px; background:url(../images/score_star_lost.png) no-repeat 0 0; background-size:contain; opacity:0; z-index:1;}
.star_area .lost .solid{ animation:a_star_lost_solid 0.3s ease-in-out both;}
.star_area .lost .hollow{ animation:a_opacity 0.3s ease-in-out both;}
.star_area .add .solid{ animation:a_star_add_solid 0.2s ease-in both;}
.star_area .add .hollow{ animation:a_star_add_hollow 0.2s ease-in both;}

@keyframes a_star_lost_solid{
	0%{ opacity:1; transform:scale(1); }
	100%{ opacity:0; transform:scale(1.3); }
}

@keyframes a_star_add_solid{
	0%{ opacity:0; transform:scale(0.1); }
	80%{ opacity:1; transform:scale(1.1); }
	90%{ opacity:1; transform:scale(0.95); }
	100%{ opacity:1; transform:scale(1); }
}

@keyframes a_star_add_hollow{
	0%{ opacity:1;}
	80%{ opacity:1;}
	100%{ opacity:0; }
}

.star_area .star_2{ left:36px;}
.star_area .star_1{ left:72px;}



.game_area{ display:block; margin:0 auto;}
.game_item_wrap{ display:block; height:100%; width:100%;z-index:1; opacity:0; position:relative;}
.game_area .penguin_item_hook{ display:block; height:104px; width:104px; position:absolute; transform-origin:0% 0%; cursor:pointer;}
.game_area .penguin_item{ display:block; height:104px; width:104px; border-radius:52px; position:absolute; left:0px; top:0x; opacity:0; transform-style:preserve-3d;}
.game_area .penguin_item .normal{ display:block; height:100px; width:100px; background:#fff; border-radius:50px; background:url(../images/stms/bg_ico.png) no-repeat; background-size:contain;  position:absolute; left:0px; top:0px; backface-visibility:hidden;}
.game_area .penguin_item .front{ display:block; height:104px; width:104px; background:#000; border-radius:52px; position:absolute; left:0px; top:0px; transform:rotateY(180deg) scale(0.95);backface-visibility:hidden;background:url(../images/stms/front_bg.png) no-repeat; background-size:contain;}
.game_area .penguin_item .wrong{ display:block; height:104px; width:104px;position:absolute; left:0px; top:0px; transform:rotateY(180deg) scale(0.95); backface-visibility:hidden;  background:url(../images/stms/wrong_cross.png) no-repeat; background-size:contain;}
/*.game_area .penguin_item .wrong .cross{ display:block; width:100%; height:100%; margin:0 auto; position:relative;  background:url(../images/stms/wrong_cross.png) no-repeat; background-size:contain;}
*/


.penguin_num_area{ display:block; height:30px; background:rgba(242,242,242,0.7); border-radius:30px; position:absolute; left:50%; margin-left:-164px; top:24px; opacity:0; text-align:center; padding:0 18px; min-width:47px; box-shadow:0px 1px 2px rgba(0,0,0,0.15), 0px 1px 0 rgba(255,255,255,0.65) inset;}
.penguin_num_area .num_area{ display:block;}

.penguin_num_area .num{ display:inline-block; height:18px; width:16px; background:url(../images/num_sprite.png) no-repeat 0 0; background-size:178px 18px; text-indent:-9999px; overflow:hidden; vertical-align:middle; margin-top:6px;}
.penguin_num_area .num_1{ background-position:-18px 0;}
.penguin_num_area .num_2{ background-position:-36px 0;}
.penguin_num_area .num_3{ background-position:-54px 0;}
.penguin_num_area .num_4{ background-position:-72px 0;}
.penguin_num_area .num_5{ background-position:-90px 0;}
.penguin_num_area .num_6{ background-position:-108px 0;}
.penguin_num_area .num_7{ background-position:-126px 0;}
.penguin_num_area .num_8{ background-position:-144px 0;}
.penguin_num_area .num_9{ background-position:-162px 0;}


.penguin_num_area .num_s_line{ display:inline-block; height:15px; width:9px; background:url(../images/num_s_line.png) no-repeat 0 0; background-size:contain; text-indent:-9999px; overflow:hidden; vertical-align:middle; margin:0 3px; position:relative; top:4px;}


.score_wrap{ display:block; height:66px; width:328px; background:rgba(242,242,242,0.65); box-shadow:0px 1px 2px rgba(0,0,0,0.15),0px 1px 0 rgba(255,255,255,0.65) inset; border-radius:40px; position:absolute; left:50%; top:50%; margin-left:-164px; margin-top:-217px; text-align:center; opacity:0;}
.score_wrap .score_txt{ display:block; height:12px; width:62px; background:url(../images/score_txt.png) no-repeat 0 0; background-size:contain; position:absolute; left:20px; top:27px;}
.score_num_area{ display:block; height:26px; width:308px; position:absolute; left:20px; top:19px;}
.score_num_area .num{ display:inline-block; height:26px; width:23px; background:url(../images/score_num_sprite.png) no-repeat 0 0; background-size:240px 26px; text-indent:-9999px; overflow:hidden; vertical-align:middle;}
.score_num_area .num_1{ background-position:-24px 0;}
.score_num_area .num_2{ background-position:-48px 0;}
.score_num_area .num_3{ background-position:-72px 0;}
.score_num_area .num_4{ background-position:-96px 0;}
.score_num_area .num_5{ background-position:-120px 0;}
.score_num_area .num_6{ background-position:-144px 0;}
.score_num_area .num_7{ background-position:-168px 0;}
.score_num_area .num_8{ background-position:-192px 0;}
.score_num_area .num_9{ background-position:-216px 0;}


.start_tips_wrap{ display:block; height:325px; width:325px; position:absolute; top:0px; left:0px; z-index:2; border-radius:22px; pointer-events:none; }
.start_tips_wrap .start_tips{ display:block; height:96px; width:242px; position:absolute; left:50%; top:50%; margin-left:-121px; margin-top:-48px;}
.start_tips_wrap .txt_1{ display:block; height:24px; width:60px; background:url(../images/start_tips_1.png) no-repeat 0 0; background-size:contain; text-indent:-9999px; overflow:hidden; position:absolute; left:0; top:0; opacity:0;}
.start_tips_wrap .txt_2{ display:block; height:24px; width:164px; background:url(../images/start_tips_2.png) no-repeat 0 0; background-size:contain; text-indent:-9999px; overflow:hidden; position:absolute; left:77px; top:0; opacity:0;}
.start_tips_wrap .txt_3{ display:block; height:24px; width:232px; background:url(../images/start_tips_3.png) no-repeat 0 0; background-size:contain; text-indent:-9999px; overflow:hidden; position:absolute; left:0; top:36px; opacity:0;}
.start_tips_wrap .txt_4{ display:block; height:24px; width:163px; background:url(../images/start_tips_4.png) no-repeat 0 0; background-size:contain; text-indent:-9999px; overflow:hidden; position:absolute; left:0; top:72px; opacity:0;}
.start_tips_wrap .i_ipengoo{ display:block; height:29px; width:29px; background:url(../images/round_info_ipengoo.png) no-repeat 0 0; background-size:contain; text-indent:-9999px; overflow:hidden; position:absolute; left:82px; top:34px; opacity:0;}

.start_tips_wrap_show .txt_1{ animation:a_opacity 0.2s 0.3s linear both;}
.start_tips_wrap_show .txt_2{ animation:a_opacity 0.3s 0.5s linear both;}
.start_tips_wrap_show .txt_3{ animation:a_opacity 0.4s 0.8s linear both;}
.start_tips_wrap_show .txt_4{ animation:a_opacity 0.3s 1.4s linear both;}
.start_tips_wrap_show .i_ipengoo{ animation:a_start_tips_ipengoo 0.2s 1.2s linear both;}


@keyframes a_start_tips_ipengoo{
	0%{ transform:scale(-1,1); opacity:0; }
	100%{ transform:scale(1,1); opacity:1; }
}


.round_info_wrap{ display:none; opacity:0;}
.txt_score .t_1{ display:block; height:17px; width:37px; background:url(../images/txt_score_1.png) no-repeat 0 0; background-size:contain; text-indent:-9999px; overflow:hidden; position:absolute; left:50%; margin-left:-96px; top:134px;}
.txt_score .t_2{ display:block; height:25px; width:130px; position:absolute; left:50%; margin-left:-58px; top:129px; text-align:center;}
.txt_score .t_2 .plus{ display:inline-block; height:18px; width:18px; background:url(../images/txt_score_plus.png) no-repeat 0 0; background-size:contain; text-indent:-9999px; overflow:hidden; vertical-align:middle;}
.txt_score .t_3{ display:block; height:17px; width:17px; background:url(../images/txt_score_3.png) no-repeat 0 0; background-size:contain; text-indent:-9999px; overflow:hidden; position:absolute; left:50%; margin-left:74px; top:134px;}
.txt_score .num{ display:inline-block; height:25px; width:18px;/* background:url(../images/txt_score_num_0.png) no-repeat 0 0; background-size:contain; text-indent:-9999px; overflow:hidden;*/ vertical-align:middle; font-size:25px; color:#f00; line-height: 25px;  text-align: center;}

.game_area_show{ opacity:1; float:right; width:766px; height:766px; }
.game_area_show .game_area{  width:400px; height:600px; position:relative; top:60px; left:50%; margin-left:-200px; transition:all .3s ease-in-out;} /*展示区的大小*/
.game_area_show .game_item_wrap{ animation:a_opacity 0.1s 0.2s linear both; }

.game_area_show .game_item_wrap .flip_out .normal{ animation:a_flip 0.3s ease-in-out both; }
.game_area_show .game_item_wrap .flip_out .front{ animation:a_flip_2 0.3s ease-in-out both; }
.game_area_show .game_item_wrap .flip_out .wrong{ animation:a_flip_2 0.3s ease-in-out both; }

.game_area_show .game_item_wrap .close_up .normal{ animation:a_flip_2 0.3s ease-in-out both; }
.game_area_show .game_item_wrap .close_up .front{ animation:a_flip 0.3s ease-in-out both; }
.game_area_show .game_item_wrap .close_up .wrong{ animation:a_flip 0.3s ease-in-out both; }


@keyframes a_flip{
	0%{ transform: rotateY(0deg) scale(1); opacity:1; }
	/*36%{ transform: rotateY(90deg); opacity:0; }让该面隐藏，否则翻转的时候会出现重叠*/
	40%{ transform: rotateY(90deg) scale(0.95); opacity:0; }
	80%{ transform: rotateY(200deg) scale(0.95); opacity:0; }
	90%{ transform: rotateY(170deg) scale(0.95); opacity:0; }
	100%{ transform: rotateY(180deg) scale(0.95); opacity:0; }
}

@keyframes a_flip_2{
	0%{ transform: rotateY(180deg) scale(0.95); opacity:0; }
	/*36%{ transform: rotateY(90deg); opacity:1; }让该面显示，否则翻转的时候会出现重叠*/
	40%{ transform: rotateY(90deg) scale(1); opacity:1; }
	80%{ transform: rotateY(-20deg) scale(1); opacity:1; }
	90%{ transform: rotateY(10deg) scale(1); opacity:1; }
	100%{ transform: rotateY(0deg) scale(1); opacity:1; }
}



@keyframes a_game_item_show{
	0%{ opacity:0; transform:scale(0.1); }
	5%{ opacity:1; transform:scale(0.1); }
	60%{ opacity:1; transform:scale(1.05); }
	80%{ opacity:1; transform:scale(0.98); }
	100%{ opacity:1; transform:scale(1); }
}

.score_tips{ display:block; height:30px; width:325px; position:absolute; left:50%; margin-left:-163px; top:50%; margin-top:-162px; z-index:3; pointer-events:none; }
.score_tips .score_get{ display:block; height:25px; width:62px; position:absolute; left:50%; margin-left:-31px; top:0px; text-align:center; opacity:0;}
.score_tips .score_get .plus{ display:inline-block; height:18px; width:18px; background:url(../images/txt_score_sprite.png) no-repeat 0 0; background-size:66px 25px; text-indent:-9999px; overflow:hidden; vertical-align:middle;}
.score_tips .num{ display:inline-block; height:25px; width:22px; background:url(../images/txt_score_sprite.png) no-repeat -20px 0; background-size:66px 25px; text-indent:-9999px; overflow:hidden; vertical-align:middle;}
.score_tips .num_1{ background-position:-44px 0;}

.score_get_show{  animation:a_score_get_show 0.3s ease-in-out both;}

@keyframes a_score_get_show{
	0%{ transform: translate(0,0) scale(0.6); opacity:0; }
	70%{ transform: translate(0,-30px) scale(1); opacity:1; }
	100%{ transform: translate(0,-40px) scale(1.05); opacity:0; }
}






.wrap_show{ display:block; opacity:1; pointer-events:auto; z-index:3;}
.wrap_prepare{ display:block; opacity:0; pointer-events:none;}





